<template>
  <div class="field-list-item-wrap">
    <el-tooltip v-if="info.name.length > 6" :content="info.name" effect="dark" placement="top-start">
      <div :class="showMobilePage && 'mobile-field-name'" class="field-name">
        {{ info.name }}
      </div>
    </el-tooltip>
    <div v-else :class="showMobilePage && 'mobile-field-name'" class="field-name">
      {{ info.name }}
    </div>
    <div class="operation-wrap">
      <div v-if="hasRouteAuth('total:field:edit')" class="field-operation" @click="editFun">编辑</div>
      <div v-else class="field-operation disabled">编辑</div>
      <el-popconfirm
        v-if="hasRouteAuth('total:field:delete')"
        confirm-button-text="确定"
        cancel-button-text="不用了"
        icon="el-icon-info"
        icon-color="red"
        title="确定删除该字段吗？"
        @confirm="deleteFun"
      >
        <div slot="reference" class="field-operation">删除</div>
      </el-popconfirm>
      <div v-else class="field-operation disabled">删除</div>
    </div>
  </div>
</template>
<script>
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
export default {
  name: 'FieldListItem',
  props: {
    info: {
      type: Object,
      default: () => null
    },
    parentIndex: {
      type: Number,
      default: 0
    },
    childrenIndex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      antiShakeTime: 0
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    hasRouteAuth,
    editFun() {
      this.$emit('edit', { info: this.info, parentIndex: this.parentIndex, childrenIndex: this.childrenIndex });
    },
    deleteFun() {
      var timestamp = new Date().getTime();
      if (timestamp - this.antiShakeTime < 500) {
        return;
      }
      this.antiShakeTime = timestamp;
      this.$emit('delete', { info: this.info, parentIndex: this.parentIndex, childrenIndex: this.childrenIndex });
    }
  }
};
</script>
<style lang="scss" scoped>
.field-list-item-wrap {
  display: flex;
  padding: 20px 0;
  .field-name {
    width: 144px;
    font-size: 14px;
    color: #999999;
    margin: 0 0px 0 39px;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .mobile-field-name {
    width: calc(100% - 120px) !important;
  }
  .operation-wrap {
    flex: 1;
    display: flex;
    justify-content: flex-start;
  }
  .field-operation {
    font-size: 14px;
    color: #406EFF;
    cursor: pointer;
    &.disabled {
      color: #999;
      cursor: not-allowed;
    }
  }
  .field-operation:first-child {
    margin-right: 24px;
  }
  @media screen and (max-width: 1200px) {
    .field-name {
      width: 85px;
      margin: 0 10px 0 20px;
    }
    .field-operation:first-child {
      margin-right: 14px;
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1249px) {
    .field-name {
      width: 92px;
      margin: 0 0px 0 16px;
    }
    .field-operation:first-child {
      margin-right: 14px;
    }
  }
   @media screen and (min-width: 1249px) and (max-width: 1400px) {
    .field-name {
      width: 94px;
      margin: 0 0px 0 39px;
    }
    .field-operation:first-child {
      margin-right: 16px;
    }
  }
  @media screen and (min-width: 1400px) and (max-width: 1600px) {
    .field-name {
      width: 98px;
      margin: 0 0px 0 39px;
    }
    .field-operation:first-child {
      margin-right: 16px;
    }
  }
}
</style>
